<template>
    <div class="DefaultContBG">
        <div class="DefaultCont">
            <p>你好,{{ UserName }}</p>
            <p>欢迎登录食链智控后台管理系统</p>
            <p>请在左侧选择您想使用的功能</p>
            <p>Ciallo～(∠・ω - )⌒★</p>
        </div>
    </div>
</template>

<script setup lang='js' name=''>
import { inject } from 'vue'
const UserName = inject("UserName")
</script>

<style scoped>
.DefaultContBG {
    width: 100%;
    height: 100%;
    position: relative;
}

.DefaultCont {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    text-align: center;
    transition: all 0.5s;
    color: var(--PdefaultColor);
}
.DefaultCont>*:nth-child(1){
    font-size: 22px;
    text-align: left;
}
.DefaultCont>*:nth-child(2),.DefaultCont>*:nth-child(3){
    font-size: 26px;
    font-weight: bold;
}
.DefaultCont>*:nth-child(4){
text-align: right;
}
</style>